CSS @scroll-timeline'i valdamine: animatsiooni juhtimine kerimise edenemise kaudu

Veebiarenduse pidevalt arenevas maastikus on kaasahaaravate ja interaktiivsete kasutajakogemuste loomine ülimalt tähtis. CSS pakub selle saavutamiseks erinevaid tööriistu ja üks võimsamaid, kuid sageli tähelepanuta jäetud, on reegel @scroll-timeline. See funktsioon võimaldab arendajatel siduda animatsioonid otse elemendi kerimise edenemisega, luues kütkestavaid kerimisega juhitavaid animatsioone. See artikkel pakub põhjalikku uurimist @scroll-timeline, hõlmates selle süntaksit, omadusi, praktilist kasutamist ja täiustatud animatsioonitehnikaid, et tõsta teie veebidisaini.

Mis on CSS @scroll-timeline?

@scroll-timeline on CSS-i reegel, mis määratleb kerimisajajoone, mis on sisuliselt olekute jada, mis vastavad määratud elemendi kerimispositsioonile. Selle asemel, et tugineda traditsioonilistele ajapõhistele animatsioonidele, seob @scroll-timeline animatsiooni edenemise kasutaja kerimistegevusega. See toob kaasa loomulikuma ja reageerivama animatsiooni, kuna animatsiooni kiirust kontrollib otse kasutaja kerimiskäitumine.

See avab põnevad võimalused:

• Visuaalne jutustamine: Näidake sisu järk-järgult, kui kasutaja kerib.
• Interaktiivne andmete visualiseerimine: Animeerige diagramme ja graafikuid, kui kasutaja andmeid uurib.
• Parallaksi efektid: Looge sügavust ja mõõdet, animeerides erinevaid elemente erineva kiirusega, mis põhineb kerimise positsioonil.
• Edenemise indikaatorid: Esitage visuaalselt kasutaja edenemist pikas dokumendis.

Süntaks ja omadused

Reegli @scroll-timeline põhisüntaks on järgmine:

            @scroll-timeline timeline-name {
  source: auto | <element-selector>;
  orientation: auto | block | inline;
  scroll-offsets: <scroll-offset>[ , <scroll-offset> ]*;
}

            

              
                Copy
              
            
          

Lähme iga omaduse juurde:

timeline-name

See on teie kerimisajajoone ainulaadne identifikaator. Te kasutate seda nime ajajoonele animatsiooni rakendamisel.

Näide:

            @scroll-timeline my-scroll-timeline {
  /* ... */
}

            

              
                Copy
              
            
          

source

See omadus määrab elemendi, mille kerimispositsioon juhib animatsiooni. Sellel võib olla kaks väärtust:

• auto: Brauser määrab automaatselt kerimiselemendi. See on sageli dokumendi vaateaken (brauseri aken).
• <element-selector>: CSS-i selektor, mis identifitseerib konkreetse elemendi, mida kasutada kerimisallikana. See võimaldab teil suunata konkreetseid konteinereid või jaotisi oma lehel.

Näide (vaateakna kasutamine allikana):

            @scroll-timeline my-scroll-timeline {
  source: auto; /* Kasutab vaateakent */
  /* ... */
}

            

              
                Copy
              
            
          

Näide (konkreetse elemendi kasutamine allikana):

            @scroll-timeline my-scroll-timeline {
  source: #scrollable-container; /* Kasutab elementi ID-ga "scrollable-container" */
  /* ... */
}

            

              
                Copy
              
            
          

orientation

See omadus määrab kerimissuuna, mida ajajoone jaoks kasutada. See määrab, kas animatsiooni juhitakse vertikaalse või horisontaalse kerimisega. Sellel võib olla kolm väärtust:

• auto: Brauser määrab automaatselt kerimissuuna, mis põhineb allikaelemendi domineerival kerimissuunal.
• block: Kasutab ploki (vertikaalne enamikus kirjutamisrežiimides) kerimissuunda.
• inline: Kasutab reasisest (horisontaalne enamikus kirjutamisrežiimides) kerimissuunda.

Näide (vertikaalse kerimise kasutamine):

            @scroll-timeline my-scroll-timeline {
  source: auto;
  orientation: block; /* Vertikaalne kerimine */
  /* ... */
}

            

              
                Copy
              
            
          

Näide (horisontaalse kerimise kasutamine):

            @scroll-timeline my-scroll-timeline {
  source: #horizontal-scroll-container;
  orientation: inline; /* Horisontaalne kerimine */
  /* ... */
}

            

              
                Copy
              
            
          

scroll-offsets

See omadus määrab kerimispositsioonid, mis vastavad animatsiooni konkreetsetele punktidele. See on valikuline omadus ja kui seda ei täpsustata, esitatakse animatsioon keritava ala algusest lõpuni. Kasutamisel saate määratleda ühe või mitu kerimisnihet, millest igaüks määrab kerimispositsiooni ja vastava punkti animatsiooni edenemises.

Süntaks <scroll-offset> on:

            <scroll-offset> = <length-percentage> [ at <length-percentage> ]

            

              
                Copy
              
            
          

Kus:

• Esimene <length-percentage> tähistab kerimispositsiooni keritavas alas.
• Valikuline at <length-percentage> tähistab vastavat animatsiooni edenemist (0% kuni 100%). Kui see on välja jäetud, jaotatakse animatsiooni edenemine ühtlaselt määratletud kerimisnihete vahel.

Näited:

            /* Kerimispositsioon 200px vastab animatsiooni edenemisele 0% */
scroll-offsets: 200px at 0%;

/* Kerimispositsioon 50% keritavast alast vastab animatsiooni edenemisele 50% */
scroll-offsets: 50% at 50%;

/* Mitu nihet: */
scroll-offsets: 0px at 0%, 500px at 50%, 1000px at 100%;

/* Ilma märksõnata "at" - ühtlaselt jaotatud animatsiooni edenemine: */
scroll-offsets: 0px, 500px, 1000px; /* Samaväärne 0px at 0%, 500px at 50%, 1000px at 100% */

            

              
                Copy
              
            
          

Olulised kaalutlused scroll-offsets kohta:

• Kui täpsustate scroll-offsets, veenduge, et need kataksid keritava ala vahemiku, et vältida ootamatut animatsioonikäitumist.
• Animatsiooni edenemine on määratletud kerimisnihete vahel.
• Kui te ei täpsusta scroll-offsets, jaotatakse animatsiooni edenemine ühtlaselt kogu keritavale alale.

Kerimisajajoone rakendamine animatsioonile

Kui olete oma kerimisajajoone määratlenud, peate seda rakendama CSS-i animatsioonile, kasutades omadust animation-timeline.

Süntaks on lihtne:

            animation-timeline: timeline-name; /* Kasutage nime, mille määratlesite @scroll-timeline'is */

            

              
                Copy
              
            
          

Samuti peate määratlema standardse CSS-animatsiooni, kasutades @keyframes. Animatsioon määratleb muutused CSS-i omadustes, mis ilmnevad kasutaja kerimisel. Lisaks soovite veenduda, et CSS-i omadus `animation-range` on seatud. See määratleb kerimisajajoone vahemiku, mis aktiveerib animatsiooni.

Siin on täielik näide:

            /* Määrake kerimisajajoon */
@scroll-timeline my-scroll-timeline {
  source: auto;
  orientation: block;
}

/* Määrake animatsioon */
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Rakendage animatsioon ja kerimisajajoon elemendile */
.animated-element {
  animation: fade-in 1s forwards;
  animation-timeline: my-scroll-timeline;
  animation-range: entry 25% cover 75%; /* entry ja cover on märksõna väärtused algus- ja lõppvahemiku jaoks */
}

            

              
                Copy
              
            
          

Selles näites:

• On määratletud @scroll-timeline nimega my-scroll-timeline, kasutades vaateakent allikana ja vertikaalset kerimist orientatsioonina.
• @keyframes nimega fade-in määratleb lihtsa sissehäälestuse ja üleslibistamise animatsiooni.
• Klassil .animated-element on rakendatud fade-in animatsioon, kuid selle asemel, et see käivituks taimeri järgi, juhib seda my-scroll-timeline.
• Animatsiooniulatus määratleb, et animatsioon peaks algama siis, kui elemendi ülemine serv siseneb vaateakna alumisse 25% ja lõppema siis, kui see jätab ülemise 25%.

Praktilised näited ja kasutusjuhud

Uurime mõningaid praktilisi näiteid selle kohta, kuidas saate kasutada @scroll-timeline, et luua kaasahaaravaid veebikogemusi.

1. Sisu järkjärguline avalikustamine

See on levinud kasutusjuht, kus te näitate sisu, kui kasutaja kerib lehte alla. Kujutage ette pikavormilist artiklit, mille osad häälestuvad sisse, kui need vaatevälja ilmuvad.

HTML:

            <section class="content-section">
  <h2>1. osa</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</section>

<section class="content-section">
  <h2>2. osa</h2>
  <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
</section>

            

              
                Copy
              
            
          

CSS:

            @scroll-timeline reveal-timeline {
  source: auto;
  orientation: block;
}

@keyframes reveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.content-section {
  animation: reveal 1s forwards;
  animation-timeline: reveal-timeline;
  animation-range: entry 25% cover 75%;
}

            

              
                Copy
              
            
          

Selles näites häälestub iga .content-section sisse, kui see vaatevälja kerib. `animation-range` tagab, et animatsioon algab siis, kui sektsiooni ülemine serv siseneb vaateakna alumisse 25% ja lõpeb siis, kui sektsioon jätab ülemise 25%.

2. Parallaksi efektid

Parallaksi efektid loovad sügavustunde, liigutades taustaelemente erineva kiirusega kui esiplaanil olevad elemendid. @scroll-timeline muudab parallaks-kerimise hõlpsaks rakendamiseks.

HTML:

            <div class="parallax-container">
  <div class="background-element"></div>
  <div class="foreground-element">
    <h2>Parallaksi sektsioon</h2>
    <p>Mõni sisu siin...</p>
  </div>
</div>

            

              
                Copy
              
            
          

CSS:

            .parallax-container {
  position: relative;
  height: 500px; /* Reguleerige vastavalt vajadusele */
  overflow: hidden;
}

.background-element {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('background.jpg'); /* Asendage oma pildiga */
  background-size: cover;
  transform: translateZ(-1px) scale(2); /* Loob parallaksi efekti */
  transform-origin: top;
  pointer-events: none; /* Võimaldab klõpsamist esiplaanil olevatel elementidel */

  animation: parallax-bg 1s linear forwards;
  animation-timeline: parallax-timeline;
  animation-range: 0vh 100vh;
}

.foreground-element {
  position: relative;
  z-index: 1;
  padding: 50px;
  background-color: rgba(255, 255, 255, 0.8);
}

@scroll-timeline parallax-timeline {
  source: auto;
  orientation: block;
}

@keyframes parallax-bg {
    0% { transform: translateZ(-1px) scale(2) translateY(0px); }
    100% { transform: translateZ(-1px) scale(2) translateY(-50vh); }
}

            

              
                Copy
              
            
          

Selles näites on .background-element paigutatud .foreground-element taha ja skaleeritud, kasutades transform. Seejärel rakendatakse animatsiooni `parallax-bg`, mille tulemusena liigub taust esiplaanist aeglasemalt, kui kasutaja kerib, luues parallaksi efekti. `animation-range` tagab, et animatsioon jookseb kogu vaateakna ulatuses (0vh kuni 100vh).

3. Edenemisriba animeerimine

Saate kasutada @scroll-timeline, et luua edenemisriba, mis esitab visuaalselt kasutaja kerimis edenemist dokumendis.

HTML:

            <div class="progress-bar-container">
  <div class="progress-bar"></div>
</div>
<div class="content">
  <!-- Teie sisu siin -->
</div>

            

              
                Copy
              
            
          

CSS:

            .progress-bar-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background-color: #eee;
  z-index: 1000;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background-color: #007bff;
  animation: progress-bar-fill 1s linear forwards;
  animation-timeline: document-scroll-timeline;
}

@scroll-timeline document-scroll-timeline {
  source: auto;
  orientation: block;
}

@keyframes progress-bar-fill {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

            

              
                Copy
              
            
          

Selles näites animeeritakse .progress-bar laius 0%-st 100%-ni, kui kasutaja dokumendis kerib. @scroll-timeline on nimetatud `document-scroll-timeline`, mis teeb selgeks, mida see esindab.

Täiustatud tehnikad

Kui olete põhitõdedega kursis, saate uurida mõningaid täiustatud tehnikaid, et luua veelgi keerukamaid kerimisega juhitavaid animatsioone.

1. scroll-offsets'i kasutamine täpseks juhtimiseks

Omadus scroll-offsets võimaldab teil kaardistada konkreetseid kerimispositsioone konkreetsetele animatsiooni edenemise väärtustele. See on kasulik, kui soovite käivitada teatud animatsiooniseisundid kerimise täpsetes punktides.

            @scroll-timeline custom-timeline {
  source: #scrollable-container;
  orientation: block;
  scroll-offsets: 100px at 0%, 500px at 50%, 1000px at 100%;
}

@keyframes custom-animation {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  50% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100px);
    opacity: 0;
  }
}

.animated-element {
  animation: custom-animation 1s forwards;
  animation-timeline: custom-timeline;
}

            

              
                Copy
              
            
          

Selles näites animatsioon:

• Algab aadressil translateX(-100px) ja opacity: 0, kui kerimispositsioon on 100px.
• Saavutab väärtuse translateX(0) ja opacity: 1, kui kerimispositsioon on 500px.
• Lõpeb väärtusega translateX(100px) ja opacity: 0, kui kerimispositsioon on 1000px.

2. Koostöö JavaScriptiga

Kuigi @scroll-timeline pakub võimsat animatsiooni juhtimist CSS-i kaudu, saate seda kombineerida JavaScriptiga, et saada veelgi suuremat paindlikkust. Näiteks võite kasutada JavaScripti, et:

• Arvutada ja värskendada dünaamiliselt scroll-offsets, mis põhinevad vaateakna suurusel või sisumuutustel.
• Käivitada täiendavaid JavaScriptil põhinevaid efekte või interaktsioone, mis põhinevad kerimise edenemisel.
• Rakendada varulahendusi brauserite jaoks, mis ei toeta täielikult @scroll-timeline.

Siin on põhiline näide kerimise edenemise lugemisest ja CSS-i muutuja värskendamisest:

            const scrollableElement = document.getElementById('scrollable-container');
const animatedElement = document.querySelector('.animated-element');

scrollableElement.addEventListener('scroll', () => {
  const scrollPosition = scrollableElement.scrollTop;
  const maxScroll = scrollableElement.scrollHeight - scrollableElement.clientHeight;
  const scrollPercentage = (scrollPosition / maxScroll) * 100;

  animatedElement.style.setProperty('--scroll-progress', scrollPercentage + '%');
});

            

              
                Copy
              
            
          

Seejärel saate seda CSS-i muutujat oma animatsioonis kasutada:

            @keyframes custom-animation {
  0% {
    transform: translateX(calc(var(--scroll-progress) * -1px));
  }
  100% {
    transform: translateX(calc(var(--scroll-progress) * 1px));
  }
}

.animated-element {
  --scroll-progress: 0%; /* Algväärtus */
  animation: custom-animation 1s linear forwards;
  animation-timeline: scroll-driven-timeline;
}

            

              
                Copy
              
            
          

3. Erinevate põhimõtete kasutamine

Kuigi animation-timing-function ei ole otseselt kohaldatav kerimisajajoonele endale (kuna ajajoont juhib kerimise edenemine, mitte aeg), saate siiski kasutada @keyframes'i sees põhimõtteid, et kontrollida animatsiooni kiirust ja rütmi erinevatel etappidel. Katsetage erinevate põhimõtetega, nagu ease-in, ease-out, ease-in-out või isegi kohandatud kuupmeetri Bezieri kõverad, et saavutada soovitud efekt.

Brauseri ühilduvus ja tagavara

2023. aasta lõpu seisuga on @scroll-timeline-il suhteliselt hea brauseri tugi kaasaegsetes brauserites, nagu Chrome, Edge, Firefox ja Safari. Siiski on oluline kontrollida praegust ühilduvuse olekut veebisaitidel nagu Can I use... enne selle tootmises rakendamist.

Brauserite jaoks, mis ei toeta @scroll-timeline, saate pakkuda tagavara, kasutades traditsioonilisi JavaScriptil põhinevaid kerimissündmuste kuulajaid ja animatsiooniteeke, nagu GSAP (GreenSock Animation Platform) või Anime.js. Samuti saate kasutada CSS-i funktsioonipäringuid (@supports), et tinglikult rakendada kas @scroll-timeline-põhiseid animatsioone või JavaScriptil põhinevaid tagavarasid.

            @supports (animation-timeline: scroll()) {
  /* Rakendage @scroll-timeline-põhised animatsioonid */
  .animated-element {
    animation: fade-in 1s forwards;
    animation-timeline: my-scroll-timeline;
  }
} @else {
  /* Rakendage JavaScriptil põhinev tagavara */
  .animated-element {
    /* Peida algselt */
    opacity: 0;
  }

  /* (JavaScripti kood kerimise tuvastamiseks ja läbipaistvuse rakendamiseks) */
}

            

              
                Copy
              
            
          

Ligipääsetavuse kaalutlused

Kui kasutate @scroll-timeline või mõnda animatsioonitehnikat, on oluline arvestada ligipääsetavusega. Veenduge, et teie animatsioonid ei põhjusta:

• Krampe: Vältige vilkumist või kiiresti muutuvaid animatsioone.
• Häirivust: Pakkuge viis, kuidas kasutajad saavad animatsioone peatada või keelata, eriti kui need on pikad või häirivad.
• Kognitiivne ülekoormus: Kasutage animatsioone säästlikult ja veenduge, et need teenivad selget eesmärki, mitte ei ole puhtalt dekoratiivsed.
• Liikumishaigust: Olge teadlik parallaksi efektidest, kuna need võivad mõnedel kasutajatel vallandada liikumishaiguse.

Kaaluge alternatiivsete võimaluste pakkumist animatsioonide kaudu esitatud teabele juurdepääsuks, näiteks staatilise sisu või kirjeldava teksti. Kasutage ARIA atribuute semantilise tähenduse ja konteksti pakkumiseks abistavatele tehnoloogiatele.

Parimad tavad

Siin on mõned parimad tavad, mida @scroll-timeline-iga töötamisel meeles pidada:

• Kasutage kirjeldavaid ajajoonenimesid: Valige ajajoonenimed, mis näitavad selgelt nende eesmärki (nt parallax-background-timeline, reveal-section-timeline).
• Hoidke animatsioonid jõudlusega: Optimeerige oma animatsioone, et vältida jõudlusprobleeme. Kasutage riistvaraliselt kiirendatud CSS-i atribuute, nagu transform ja opacity, kui see on võimalik.
• Testige põhjalikult: Testige oma animatsioone erinevatel seadmetel ja brauseritel, et tagada nende ootuspärane toimimine ja et need ei põhjustaks ligipääsetavuse ega jõudluse probleeme.
• Alustage lihtsast: Alustage lihtsate animatsioonidega ja lisage järk-järgult keerukust, kui saate kogemusi.
• Mõelge kasutajakogemusele: Veenduge, et teie animatsioonid parandavad kasutajakogemust, mitte ei kahjusta seda. Vältige liiga keerukaid või häirivaid animatsioone.
• Kasutage CSS-i omadust `animation-range`: Veenduge, et animatsioonid käivituksid ainult siis, kui element on vaateväljas, et tagada sujuv ja prognoositav kogemus.

Kokkuvõte

@scroll-timeline on võimas CSS-i funktsioon, mis võimaldab arendajatel luua kaasahaaravaid ja interaktiivseid kerimisega juhitavaid animatsioone. Sidudes animatsioonid kasutaja kerimiskäitumisega, saate luua loomulikumaid ja reageerivamaid veebikogemusi. Mõistes selle süntaksit, omadusi ja täiustatud tehnikaid, saate kasutada @scroll-timeline oma veebidisaini tõstmiseks ja kütkestavate kasutajate teekondade loomiseks. Pidage meeles, et @scroll-timeline rakendamisel tuleb arvestada brauseri ühilduvuse, ligipääsetavuse ja jõudlusega ning seada alati esikohale kasutajakogemus.